<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-breadcrumb :class="isQSty()" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="handleBreadCrumb()">法定呈缴</el-breadcrumb-item>
        <el-breadcrumb-item :to="handleBreadCrumb()">图书呈缴</el-breadcrumb-item>
        <el-breadcrumb-item>新增缴送</el-breadcrumb-item>
      </el-breadcrumb>
      <el-button
        v-if="isHasPermission('ui-vue3.addexternal.add')"
        type="primary"
        size="small"
        class="addBtn"
        @click="openAdd()"
      >
        新增
      </el-button>
      <el-table
        :data="useDemo.addListData"
        style="width: 100%"
      >
        <el-table-column
          prop="userName"
          label="姓名"
        />
        <el-table-column
          prop="account"
          label="账号"
        />
        <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
          <template #default="scope">
            <el-button type="primary" v-if="isHasPermission('ui-vue3.addexternal.edit')" @click="handleEditClick(scope.row)">编辑</el-button>
            <el-tooltip content="删除" placement="top" v-if="isHasPermission('ui-vue3.addexternal.remove')">
              <el-button link type="primary" icon="Delete" @click="handleDeleteClick(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <add ref="addref" @handleAddSubmit="handleAddSubmit" />
      <edit
        ref="editref"
        :editVisible="editVisible"
        :listItemInfo="listItemInfo"
        @handleEditClose="handleEditClose"
        @handleEditSubmit="handleEditSubmit"
      />
    </el-card>
  </div>
</template>

<script setup name="AddExternal">
import { ref, getCurrentInstance } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
import { ifPermission } from '@/utils/index'
import useDemoStore from '@/store/modules/demo'
import Add from './components/Add'
import Edit from './components/Edit'

const useDemo = useDemoStore();
const { proxy } = getCurrentInstance();

const editVisible = ref(false);
const listItemInfo = ref({});

/** 打开新增弹窗 */
function openAdd() {
  proxy.$refs["addref"].show();
}

/** 新增提交 */
function handleAddSubmit(value) {
  useDemo.addExternalAdd(value).then((res) => {
    const code = res.data.code
    if (code === 'COMMON_200') {
      proxy.$modal.msgSuccess('新增成功')
      getList()
    } else {
      proxy.$modal.msgError(res.data.msg)
    }
    proxy.$refs['addref'].close()
  })
}

/** 打开编辑弹窗 */
function handleEditClick(row) {
  useDemo.addExternalListItem({ id: row.id }).then((res) => {
    editVisible.value = true
    listItemInfo.value = res.data.data
  })
}

/** 关闭编辑弹窗 */
function handleEditClose(value) {
  editVisible.value = value
}

/** 编辑提交 */
function handleEditSubmit(value) {
  useDemo.addExternalEdit(value).then((res) => {
    const code = res.data.code
    if (code === 'COMMON_200') {
      ElMessage({
        type: 'success',
        message: '编辑成功',
        center: true
      })
      editVisible.value = false
      getList()
    } else {
      ElMessage({
        type: 'error',
        message: res.data.msg
      })
    }
  })
  getList()
}

/** 删除 */
function handleDeleteClick(row) {
  ElMessageBox.confirm(
    '确认要删除吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      useDemo.addExternalRemove({ id: row.id }).then((res) => {
        const code = res.data.code
        if (code === 'COMMON_200') {
          proxy.$modal.msgSuccess('删除成功')
        } else {
          proxy.$modal.msgError(res.data.msg)
        }
      })
      getList()
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消删除',
      })
    })
  
}

/** 获取列表 */
function getList() {
  useDemo.addExternalList()
}

/** 乾坤环境面包屑跳转路径判断 */
function handleBreadCrumb() {
  // qiankun主应用环境面包屑跳转加前缀
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    return '/vue3/external/bookexternal/addexternal'
  } else {
    return '/external/bookexternal/addexternal'
  }
}

/** 乾坤环境面包屑样式判断 */
function isQSty() {
  if (qiankunWindow.__POWERED_BY_QIANKUN__) {
    return 'breadTitleQiank'
  } else {
    return 'breadTitle'
  }
}

/** 按钮权限控制 */
function isHasPermission(permissionName) {
  return ifPermission(permissionName)
}

getList() /** 获取列表 */
</script>

<style scoped>
.line{
  text-align: center;
}
.titleHeard {
  height: 40px;
  border: 1px solid #ccc;
  padding: 10px 5px;
  margin-bottom: 10px;
  background-color: #fff;
}
.breadTitle {
  margin: 0px 0px 20px 0px;
  background-color: #f0f2f578;
  padding: 15px 0px 15px 15px;
}
.breadTitleQiank {
  margin: 0px 0px 20px 0px;
  background-color: #fff;
  padding: 15px 0px 15px 15px;
}
.addBtn {
  float:right;
  margin-bottom:20px;
}
</style>
